<template>
	<view class="page-view">
		<view class="header-bg-wrap"></view>
		<MyNav title="设备列表" @navBarHeight="setNavBarHeight"></MyNav>
		<view class="header-wrap">
			<view class="search-wrap">
				<view class="area-filter" @click="selectPointArea">
					<view class="area-tip" :class="{ 'default-area': !area.label }">
						{{ area.label || '请选择' }}
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
				<u-search
					v-model="equipNo"
					@change="changeEquipNo"
					@clear="handleClear"
					placeholder="设备编号"
					shape="square"
					clearabled
					:showAction="false"
				></u-search>
			</view>
			<view class="filter-wrap">
				<view class="filter-title"> 设备列表 </view>
				<view class="total-tip"> 已安装设备{{ installTotal }}台 </view>
				<view class="filter-tag-wrap">
					<view class="filter-tag" :class="{ 'active-tag': checkStatus === '' }" @click="filterStatusSearch('')"
						>全部
					</view>
					<view class="filter-tag" :class="{ 'active-tag': checkStatus === 0 }" @click="filterStatusSearch(0)">
						未检测</view
					>
					<view class="filter-tag" :class="{ 'active-tag': checkStatus === 1 }" @click="filterStatusSearch(1)">
						已检测</view
					>
				</view>
			</view>
		</view>
		<view class="equip-list-wrap" :style="{ height: 'calc(100% - 428rpx - (' + navBarHeight + 'px))' }">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleGetMore">
				<view class="equip-item" v-for="(item, index) in equipList" :key="item.id" @click="handleViewEquip(item)">
					<view v-if="item.checked === 1" class="checked-status">已检测</view>
					<view v-else class="uncheck-status">未检测</view>
					<view class="equip-header">
						<text class="eqp-name">{{ item.equType | showEqpType(psEquTypeList) }}</text>
						<view class="online-status">
							<text v-if="item.onlintStatus === 1" class="un-active">未激活</text>
							<text v-if="item.onlintStatus === 2" class="online">在线</text>
							<text v-if="item.onlintStatus === 3" class="outline">离线</text>
						</view>
					</view>
					<view class="equip-info">设备名称：{{ item.equName || '--' }}</view>
					<view class="equip-info">设备编号：{{ item.equNo || '--' }}</view>
					<view class="equip-info">管点编号：{{ item.pipPointNo || '--' }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
import MyNav from '../components/my-navbar/my-navbar.vue';
import { debounce } from '../../utils/fun';
import { getDictItemInfo } from '@/api/system.js';
import { getEqpList } from '@/api/equipmentInstallation';
export default {
	components: {
		MyNav,
	},
	filters: {
		showEqpType(type, psEquTypeList) {
			if (psEquTypeList.length) {
				const showItem = psEquTypeList.find((item) => +item.itemValue === type);
				return showItem?.itemText || '';
			} else {
				return '';
			}
		},
	},
	data() {
		return {
			navBarHeight: '',
			equipNo: '',
			checkStatus: '',
			area: {
				label: '',
				pointArea: '',
			},
			equipList: [],
			installTotal: 0,
			total: null,
			finish: false,
			pageNo: 1,
			pageSize: 20,
			psEquTypeList: [],
		};
	},
	onReady() {
		this.changeEquipNo = debounce(this.changeEquipNo);
	},
	created() {
		this.handleGetEquList();
		this.handleGetDictItemInfo('ps_equ_type');
	},
	methods: {
		getListParams() {
			const { checkStatus, area, equipNo, pageNo, pageSize } = this;
			return {
				checked: checkStatus,
				pointArea: area.pointArea || '',
				equNo: equipNo || '',
				pageNo,
				pageSize,
			};
		},
		async handleGetEquList() {
			try {
				const { data } = await getEqpList({
					...this.getListParams(),
				});
				const equipList = data?.result?.records || [];
				this.total = data?.result?.total || 0;
				if (this.pageNo === 1) {
					this.equipList = equipList;
					if (this.checkStatus === '') {
						this.installTotal = this.total;
					}
				} else {
					this.equipList = [...this.equipList, ...equipList];
				}
			} catch (e) {
				//TODO handle the exception
			}
		},
		handleGetMore() {
			this.pageNo++;
			if (this.total && this.equipList.length >= this.total) {
				return;
			}
			this.handleGetEquList();
		},
		filterStatusSearch(status) {
			this.checkStatus = status;
			this.pageNo = 1;
			this.handleGetEquList();
		},
		changeEquipNo() {
			const equipNo = this.equipNo;
			if (!equipNo || (equipNo && equipNo.length < 3)) {
				return;
			}
			this.pageNo = 1;
			this.handleGetEquList();
		},
		handleClear() {
			this.equipNo = '';
			this.pageNo = 1;
			this.handleGetEquList();
		},
		handleViewEquip(item) {
			// console.log(item)
			const equipId = item.id;
			uni.navigateTo({
				url: '/subpak_eqp_install/equipDetail/equipDetail',
				events: {
					refresh: () => {
						this.handleGetEquList();
					},
				},
				success: (res) => {
					// 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('equipId', equipId);
				},
			});
		},
		async handleGetDictItemInfo(dictCode) {
			try {
				const { data } = await getDictItemInfo({
					dictCode,
				});
				this.psEquTypeList = data?.result || [];
			} catch (e) {
				//TODO handle the exception
			}
		},
		selectPointArea() {
			console.log('selectPointArea');
			uni.navigateTo({
				url: '/pages/selectPointArea/selectPointArea',
				events: {
					selectedArea: (data) => {
						// console.log('selectedArea',data);
						this.area.pointArea = data[0].id + '';
						this.area.label = data[0].title;
						this.pageNo = 1;
						this.handleGetEquList();
					},
				},
				success: (res) => {
					const selectStreet = {
						id: this.area.pointArea,
						title: this.area.label,
					};
					res.eventChannel.emit('selectArea', selectStreet);
				},
			});
		},
		setNavBarHeight(heigh) {
			this.navBarHeight = heigh;
		},
	},
};
</script>
<style scoped lang="scss">
.header-bg-wrap {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 440rpx;
	background-image: linear-gradient(180deg, #3576f2 0%, #3576f200 100%);
}

.page-view {
	height: 100vh;
}

.header-wrap {
	position: relative;
	z-index: 9;
	padding: 12rpx 24rpx 24rpx;
}

.search-wrap {
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	height: 72rpx;
	margin: 20rpx 0 32rpx;
	background: #ffffff;
	border-radius: 36px;
	border: 4rpx solid #fff;
	overflow: hidden;
}

.area-filter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx;
	background: #e5eeff;
}

.area-tip {
	width: 124rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.default-area {
	color: #999;
}

.filter-wrap {
	padding: 24rpx;
	background: #ffffff;
	border-radius: 16px;
}

.filter-title {
	height: 50rpx;
	line-height: 50rpx;
	font-weight: 500;
	font-size: 36rpx;
	color: #000000e6;
}

.total-tip {
	height: 33rpx;
	line-height: 33rpx;
	font-size: 24rpx;
	color: #686b73;
	margin-bottom: 24rpx;
}

.filter-tag-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.filter-tag {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 160rpx;
	height: 56rpx;
	background: #f3f3f3;
	border-radius: 4px;
	margin-right: 32rpx;
	font-size: 28rpx;
	color: #00000099;
	border: 2px solid #f3f3f3;
}

.active-tag {
	color: #75a4ff;
	background: #dae7ff;
	border: 2px solid #75a4ff;
}

.scroll-Y {
	height: 100%;
}

.equip-item {
	position: relative;
	box-sizing: border-box;
	padding: 16rpx 24rpx 24rpx;
	margin: 0 24rpx;
	background: #ffffff;
	border-radius: 16rpx;

	& + & {
		margin-top: 24rpx;
	}
}

.uncheck-status {
	position: absolute;
	top: 0;
	right: 0;
	width: 126rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	background-image: linear-gradient(270deg, #ffa7a7 0%, #f24135 100%);
	border-radius: 0 16rpx 0 100rpx;
	font-size: 26rpx;
	color: #ffffff;
}

.checked-status {
	position: absolute;
	top: 0;
	right: 0;
	width: 126rpx;
	height: 48rpx;
	line-height: 48rpx;
	text-align: center;
	background-image: linear-gradient(270deg, #a5c4ff 0%, #3576f2 100%);
	border-radius: 0 16rpx 0 100rpx;
	font-size: 26rpx;
	color: #ffffff;
}

.equip-header {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 30rpx;
}

.eqp-name {
	height: 50rpx;
	margin-right: 14rpx;
	line-height: 50rpx;
	font-weight: 500;
	font-weight: 500;
	font-size: 36rpx;
	color: #000000e6;
}

.online,
.un-active {
	padding: 2rpx 8rpx;
	background: #dae7ff;
	border-radius: 4rpx;
	font-size: 24rpx;
	color: #3576f2;
}

.outline {
	padding: 2rpx 6rpx;
	background: #ffdada;
	border-radius: 4rpx;
	font-size: 24rpx;
	color: #f23535;
}

.equip-info {
	height: 42rpx;
	line-height: 42rpx;
	font-size: 30rpx;
	color: #00000099;
	margin-bottom: 8rpx;
}
</style>
